<template>
  <q-page class="q-pa-md">
    <div style="position: relative; ">
      <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
        <el-icon style="cursor: pointer;" @click="router.go(-1)">
          <ArrowLeft />
        </el-icon>
        <q-breadcrumbs-el label="数据标注" />
        <q-breadcrumbs-el label="任务详情" />
      </q-breadcrumbs>
      <div class="userData textColor ">
        <div class="row">
          <div class="col">
            <div class="row">
              <div class="col col-3">ID</div>
              <div class="col">{{ detailData.id }}</div>
            </div>
            <div class="row">
              <div class="col col-3">标注类型</div>
              <div class="col">{{ detailData.label_title }}</div>
            </div>
            <div class="row">
              <div class="col col-3">创建时间</div>
              <div class="col">{{ detailData.create_at }}</div>
            </div>
            <div class="row ">
              <div class="col col-3">标签集</div>
              <div class="col">内容</div>
            </div>
          </div>
          <div class="col">
            <div class="row">
              <div class="col col-3">名称</div>
              <div class="col">{{ detailData.title }}</div>
            </div>
            <div class="row">
              <div class="col col-3">数据集名称</div>
              <div class="col">{{ detailData.dataset_title }}</div>
            </div>
            <div class="row">
              <div class="col col-3">更新时间</div>
              <div class="col">{{ detailData.update_at }}</div>
            </div>
            <div class="row">
              <div class="col col-3">描述</div>
              <div class="col">{{ detailData.description }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="userData textColor">
        <div class="row">
          <div class="col" style="padding-right: 20px;">
            <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
              <q-breadcrumbs-el label="数据标注" />
              <q-breadcrumbs-el label="标注进度" />
            </q-breadcrumbs>
            <chart-line v-if="optionInit" :chartOption="chartOption2" :chartSize="chastSize2"></chart-line>
          </div>
          <div class="col " style="padding-left: 20px;">
            <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
              <q-breadcrumbs-el label="数据标注" />
              <q-breadcrumbs-el label="标签统计" />
            </q-breadcrumbs>
            <chart-line v-if="optionInit" :chartOption="chartOption" :chartSize="chastSize"></chart-line>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, shallowRef, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { dataLabelDetail } from 'src/api/dataset'
import { dataSetStore } from 'src/stores/dataSet';
import chartLine from 'src/components/chartLine.vue';
import { time } from 'console';
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const labelId = dataSetStore().dataset_id
const descriptionModel = ref()
const detailData = shallowRef({
  title: '',
  id: 0,
  description: '',
  label_title: '',
  update_at: '',
  create_at: '',
  dataset_title: '',
  creator: '',
  data_statistic: {
    labeled_number: 0,
    total_number: 0
  }
})
const optionInit=ref(false)
const chastSize = reactive({
  width: '80%',
  height: "350px"
})
const chastSize2 = reactive({
  width: '95%',
  height: "280px"
})
const chartOption2 = reactive({

  title: {
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      type: 'pie',
      radius: '80%',
      data: [
        {
          value: 0,
          name: '已标注个数'
        },
        {
          value: 0,
          name: '标注总数'
        }
      ],
      itemStyle: {
        normal: {
          color: function (params: any) {
            var colorList = ['#5087ec', '#ff9999'];
            return colorList[params.dataIndex]
          }
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
const chartOption = reactive({
  tooltip: {
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#fff'
      }
    },
    trigger: 'item'
  },
  xAxis: {
    type: 'category',
    data: ['标签一', '标签二']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [2,1],
      type: 'bar',
      barWidth:'15%',
    }
  ]
})
getData()
function getData() {
  dataLabelDetail(projectId, labelId).then((res: any) => {
    detailData.value = res.data
    descriptionModel.value = detailData.value.description
    chartOption2.series[0].data[0].value=res.data.data_statistic.labeled_number
    chartOption2.series[0].data[1].value=res.data.data_statistic.total_number
    let dataArr= res.data.labels.map((item:any,index:any)=>{
      chartOption.xAxis.data[index]=item.value
      return item.count
    })
    chartOption.series[0].data=dataArr
    optionInit.value=true
  }).catch(error => {
    console.log(error)
  })
}
</script>

<style scoped lang="scss">
.userData {
  width: 96%;
  margin: 0 auto;
  margin-bottom: 20px;

  .q-pa-md {
    padding: 0;
    width: 50%;
  }

  .row {
    margin-bottom: 20px;
  }
}

.line {
  width: 100%;
  height: 15px;
  background: #ececec;
  border-radius: 4px;
  margin-bottom: 20px;
}
</style>
